import { Button } from 'antd';
import { useRef } from 'react';

import { getImageData, loadImg, showFileUploader } from '@/utils/fileUtil';
function getRGBA(pixels: ImageData, pixWidth = 1) {
  const results = [];
  const { width, data } = pixels;
  for (let i = 0; i < data.length / 4; i++) {
    results.push({
      x: (i % width | 0) * pixWidth,
      y: ((i / width) | 0) * pixWidth + pixWidth,
      r: data[i * 4],
      g: data[i * 4 + 1],
      b: data[i * 4 + 2],
      a: data[i * 4 + 3],
    });
  }

  return results;
}
const pix = 1;
const maxWidth = 200;
const BoxShadow = () => {
  const ref = useRef<HTMLDivElement>(null);
  return (
    <div>
      <div>
        <Button
          onClick={async () => {
            const [file] = await showFileUploader();
            if (file) {
              const img = await loadImg(URL.createObjectURL(file));
              const imageData = getImageData(img, maxWidth);
              const results = getRGBA(imageData, pix);

              const div = ref.current!;
              div.style.boxShadow = results
                .map((item) => `${item.x}px ${item.y}px rgba(${item.r}, ${item.g}, ${item.b}, ${item.a})`)
                .join(',');
            }
          }}
        >
          上传
        </Button>
      </div>
      <div ref={ref} style={{ width: pix, height: pix }}></div>
    </div>
  );
};

export default BoxShadow;
